<template>
    <div class="box-content info-box">
        <div class="navigation">订单管理/客户列表</div>
        <div class="mt-3">
            <el-input
                    class=" mrt-10"
                    style="width: 120px;"
                    placeholder="所属订单号"
                    v-model="searchForm.fromOrder"
                    clearable>
            </el-input>
            <el-select v-model="searchForm.phoneStatus" placeholder="通话状态" :clearable="true" style="width: 110px;" class="mrt-10">
                <el-option label="未拨打" value="未拨打"></el-option>
                <el-option label="已接通" value="已接通"></el-option>
                <el-option label="未接通" value="未接通"></el-option>
                <el-option label="空号" value="空号"></el-option>
                <el-option label="停机" value="停机"></el-option>
            </el-select>
            <el-select v-model="searchForm.customerStatus" placeholder="客户状态" :clearable="true" style="width: 110px;" class="mrt-10">
                <el-option label="有意向" value="2"></el-option>
                <el-option label="无意向" value="3"></el-option>
                <el-option label="待跟进" value="1"></el-option>
            </el-select>
            <el-date-picker
                    class="mrt-10"
                    style="width: 350px;"
                    v-model="searchForm.date"
                    type="datetimerange"
                    range-separator="~"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary"  @click="onSearch">查询</el-button>
        </div>
        <div class="mt-3">
            <el-table
                    v-loading="isLoad"
                    :element-loading-text="loadText"
                    :data="orderData"
                    stripe
                    :header-cell-style="tableHeaderColor"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        label="所属订单"
                        align="center"
                        prop="apply_id">
                </el-table-column>
                <el-table-column
                        label="坐席号"
                        align="center"
                        prop="who_call.id">
                </el-table-column>
                <el-table-column
                        label="app"
                        align="center"
                        prop="type">
                </el-table-column>
                <el-table-column
                        label="日期"
                        align="center">
                    <template slot-scope="scope">
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0, 11):'无'}}</div>
                        <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11 ):'无'}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="地区"
                        align="center"
                        prop="place">
                </el-table-column>
                <el-table-column label="电话号码" align="center"  prop="phone">
                    <template slot-scope="scope">
                        <div>{{scope.row['phone']}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="callee_status"
                        label="通话状态"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        label="客户状态"
                        align="center"
                        prop="customer_status_link">
                </el-table-column>
                <!--<el-table-column label="备注" align="center" width="80">-->
                    <!--<template slot-scope="scope">-->
                        <!--<el-button size="mini"-->
                                   <!--type="primary"-->
                                   <!--@click="openRemark(scope.row['id'])">添加-->
                        <!--</el-button>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column label="操作" align="center" width="80">-->
                    <!--<template slot-scope="scope">-->
                        <!--<el-button size="mini"-->
                                   <!--type="warning"-->
                                   <!--@click="callPhone(scope.row['phone'],scope.row['id'])">拨号-->
                        <!--</el-button>-->
                        <!--<el-button size="mini"-->
                                   <!--type="warning"-->
                                   <!--@click="callPhone(scope.row['phone'],scope.row['id'])">删除-->
                        <!--</el-button>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column label="通话记录" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   type="success"
                                   @click="getCallRecord(scope.row)">查看
                        </el-button>
                        <!--<el-button size="mini"-->
                                   <!--type="success"-->
                                   <!--@click="$router.push({name:'record',params:{id:scope.row.id}})">查看-->
                        <!--</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="mt-3 float-right">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-sizes="[10, 20, 30]"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-size="pageSize"
                        :current-page="page"
                        :total="totalPage">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                title="备注"
                :visible.sync="remarkDialog"
                width="600px"
                :close-on-click-modal="false"
                center>
            <div class="dialog" v-loading="isLoadRemark">
                <!--<div style="width: 500px;margin: 0 auto">-->
                <el-form label-width="80px" :model="remarkList" :rules="remarkRule" ref="remarkList">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="客户状态" prop="customerStatus" >
                                <el-select v-model="remarkList.customerStatus" size="small" style="width: 195px;" placeholder="请选择客户状态">
                                    <el-option label="待跟进" value="1"></el-option>
                                    <el-option label="有意向" value="2"></el-option>
                                    <el-option label="无意向" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="通话状态" prop="phoneStatus" >
                                <el-select v-model="remarkList.phoneStatus" size="small" style="width: 195px;" placeholder="请选择通话状态">
                                    <el-option label="未拨打" value="未拨打"></el-option>
                                    <el-option label="已接通" value="已接通"></el-option>
                                    <el-option label="未接通" value="未接通"></el-option>
                                    <el-option label="空号" value="空号"></el-option>
                                    <el-option label="停机" value="停机"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="客户姓名" prop="name" >
                                <el-input placeholder="请输入客户姓名"  size="small" v-model="remarkList.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户手机" prop="phone" >
                                <el-input placeholder="请输入手机号" size="small" v-model="remarkList.phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="客户微信" prop="wx" >
                                <el-input placeholder="请输入微信号" size="small" v-model="remarkList.wx"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" style="height: 60px" prop="comment" >
                                <el-input type="textarea" size="small" resize="none" v-model="remarkList.comment"
                                          :maxlength="100" placeholder="如有特殊需求，请输入备注信息"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div :class="isShowComment?'comments':'comment'" @click="isShowComment = !isShowComment">历史备注<i
                        :class="isShowComment?'el-icon-caret-top':'el-icon-caret-bottom'"></i></div>
                <div style="max-height: 300px;overflow-y: scroll;margin-top: 10px">
                    <div v-for="item,index in remarkData" :key="index" v-show="isShowComment">
                        <!--<div style="padding:4px 0 ;">-->
                        <!--{{index+1}}、[{{item.created_at}}]:【客户名】{{item.name}}【电话】{{item.phone}}【微信】{{item.wechart}} {{item.customer_status_link}}【备注】{{item.comments }}-->
                        <!--</div>-->
                        <div class="history-remark">
                            <el-row>
                                <el-col :span="2" class="num">{{index+1}}、</el-col>
                                <el-col :span="8">客户名：{{item.name}}</el-col>
                                <el-col :span="8">电话：{{item.phone}}</el-col>
                                <el-col :span="6" style="text-align: right">客户状态：<span style="color: red;">{{item.customer_status_link}}</span></el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="8">微信：{{item.wechart}}</el-col>
                                <el-col :span="5">通话状态：<span style="color: #409EFF">{{item.callee_status}}</span></el-col>
                                <el-col :span="9" style="text-align: right">提交时间：{{item.created_at}}</el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="22">备注：{{item.comments }}</el-col>
                            </el-row>
                        </div>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="remarkDialog = false">取 消</el-button>
                <el-button type="primary" :loading="isLoadRemarkAdd"
                           @click="submitForm('remarkList')">{{isLoadRemarkAdd?'添加中':'添 加'}}</el-button>
              </span>
        </el-dialog>
        <el-dialog
                title="通话记录"
                :visible.sync="callRecordDialog"
                width="600px"
                :close-on-click-modal="false"
                center>
            <div class="dialog-record" v-loading="isLoadCallRecord">
                <div class="audios" v-if="CallRecordData && CallRecordData.length > 0 " v-for="item,index in CallRecordData" :key="index">
                    <!--<div class="boel" ><span>{{index +1}}</span></div>-->
                    <!--<div class="audio-bar" @click="playRecord(item.wavlog)" >点击播放{{item.created_at}}</div>-->
                    <el-tooltip class="item" effect="dark" content="点击即可播放" placement="top">
                        <div class="box-audio"  @click="playRecord(item.wavlog,index+1)">
                            <div>
                                <span>{{index +1}}、</span>
                                <span class="date">通话日期 {{item.created_at}}</span>
                                <span style="padding-left: 10px">状态：{{item.caller_status_link}}</span>
                            </div>
                            <div>
                                <span>{{item.billsec}}s</span>

                                <span style="color: red;padding-left: 10px" v-show="isPlay == index+1">当前</span>
                            </div>
                        </div>
                    </el-tooltip>

                </div>
                <div style="text-align: center;position: absolute;bottom: 70px;left: 50px" v-if="CallRecordData && CallRecordData.length > 0 ">
                    <audio  controls="controls" preload="auto" style="width: 500px;" id="audio"></audio>
                </div>
                <div v-else>
                    <div style="text-align: center;color: #999;padding-top: 20px;">暂无通话记录</div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="callRecordDialog = false">取 消</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MyOrders",
        data() {
            return {
                isPlay:null,
                audio: null,
                audioUrl:'',
                page: 1,
                pageSize: 10,
                totalPage: 0,
                pageAll: false,
                isLoad: false,
                remarkDialog: false,
                callRecordDialog: false,
                isLoadCallRecord: false,
                isLoadRemark: false,
                isLoadRemarkAdd: false,
                callLoading: false,
                isShowComment: false,
                loadText: '拼命加载中',
                searchForm: {
                    date: [],
                    phoneStatus: '',
                    customerStatus: '',
                    fromOrder:''
                },
                dayFlag: false,
                remarkList:{
                    name:'',
                    phone:'',
                    customerStatus:'',
                    phoneStatus:'',
                    comment:'',
                    wx:'',
                    activeNames: []
                },
                remarkRule: {
                    customerStatus: [
                        {required: true, message: '请选择客户状态', trigger: 'blur'}
                    ],
                    phoneStatus: [
                        {required: true, message: '请选择通话状态', trigger: 'blur'}
                    ]
                },
                searchStr: "",//实际查询字符串
                orderData: [],  // 订单列表
                remarkData: [],  // 备注列表
                CallRecordData: []  // 通话记录
            }
        },
        watch:{
            remarkDialog:function (val) {
                if (!val) {
                    this.remarkList.name = '';
                    this.remarkList.customerStatus =  '';
                    this.remarkList.comment =  '';
                    this.remarkList.phone =  '';
                    this.remarkList.wx =  '';
                    this.remarkData =  [];
                    this.isShowComment = false;
                }
            },
            callRecordDialog: function (val) {
                if (!val) {
                    this.isPlay = false;
                    this.CallRecordData = [];
                }
            }
        },
        created: function () {
            this.getTableList();
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       this.addRemark();
                    } else {
                        return false;
                    }
                });
            },
            playRecord(url,index){
                let audio = document.getElementById('audio');
                // console.info('url',url)
                audio.src =  process.env.VUE_APP_API_HOST + url;
                audio.currentTime = 0;
                audio.play();
                this.isPlay = index;
            },
            getTableList() {
                this.isLoad = true;
                this.$http.get('api/admin/express/info' + this.searchStr, {
                    params: {
                        pageSize: this.pageSize,
                        page: this.page
                    }
                })
                    .then((res) => {
                        this.isLoad = false;
                        this.orderData = res.data;
                        this.totalPage = res.meta.total;
                    })
                    .catch((err) => {
                        this.isLoad = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            getCallRecord(val) {
                this.CallRecordData = [];
                this.callRecordDialog = true;
                this.isLoadCallRecord = true;
                this.$http.get('api/express/phone/' + val.id)
                    .then((res) => {
                        this.CallRecordData = res.data;
                        this.isLoadCallRecord = false;
                    })
                    .catch((err) => {
                        this.isLoadCallRecord = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            }, // 查看通话记录
            callPhone(phone, id) {
                this.$confirm(phone, '确定拨打', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.callLoading = true;
                    this.dialPhone(phone, id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消拨打',
                        duration: 1000
                    });
                });
            },
            dialPhone(phone, id) {
                this.$http.post('api/common/call', {
                    phone: phone,
                    infoId: id
                })
                    .then((res) => {
                        this.callLoading = false;
                        this.$message({
                            type: 'success',
                            message: '马上准备拨号。。。',
                            duration: 1000
                        });
                        this.openRemark(id);
                    })
                    .catch((err) => {
                        this.callLoading = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },  // 拨打电话
            openRemark(id) {
                this.remarkDialog = true;
                this.openOrderId = Number(id);
                this.isLoadRemark = true;
                this.$http.get('api/express/notice/'+ id)
                    .then((res) => {
                        this.isLoadRemark = false;
                        if (res.data && res.data.length > 0) {
                            this.remarkList.name = res.data[0].name;
                            this.remarkList.customerStatus = res.data[0].customer_status.toString();
                            this.remarkList.comment = res.data[0].comments;
                            this.remarkList.phone = res.data[0].phone;
                            this.remarkList.wx = res.data[0].wechart;
                            this.remarkList.phoneStatus = res.data[0].callee_status;
                        }
                        this.remarkData = res.data;
                    })
                    .catch((err) => {
                        this.isLoadRemark = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            addRemark() {
                let params;
                params = {
                    info_id: this.openOrderId,
                    name: this.remarkList.name,
                    wechart: this.remarkList.wx,
                    phone: this.remarkList.phone,
                    comments: this.remarkList.comment,
                    callee_status: this.remarkList.phoneStatus,
                    customer_status: this.remarkList.customerStatus
                };
                this.isLoadRemarkAdd = true;
                this.$http.post('api/express/notice',params)
                    .then((res) => {
                        this.isLoadRemarkAdd = false;
                        this.remarkDialog = false;
                        this.onSearch();
                        this.$message.success('添加成功！')
                    })
                    .catch((err) => {
                        this.isLoadRemarkAdd = false;
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            },
            onSearch() {
                this.searchStr = "";
                if (this.searchForm.date && this.searchForm.date.length > 0) {
                    this.addConStr();
                    this.searchStr+=`created_at$=>=${this.searchForm.date[0]},<=${this.searchForm.date[1]}`;
                }
                if (this.searchForm.fromOrder) {
                    this.addConStr();
                    this.searchStr+=`apply_id=${this.searchForm.fromOrder}`;
                }
                if (this.searchForm.phoneStatus) {
                    this.addConStr();
                    this.searchStr += `callee_status=${this.searchForm.phoneStatus}`;
                }
                if (this.searchForm.customerStatus) {
                    this.addConStr();
                    this.searchStr += `customer_status=${this.searchForm.customerStatus}`;
                }
                this.page = 1;
                this.getTableList();
            },
            addConStr() {
                if (this.searchStr.length > 0) {
                    this.searchStr += '&';
                } else {
                    this.searchStr += '?';
                }
            },
            clear() {
                this.searchForm = {
                    phoneStatus: ''
                };
                this.searchStr = "";
                this.getNowFormatDate();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.page = 1;
                this.pageSize = val;
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getTableList();
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        },
        components: {}
    }
</script>
<style lang="less">
    .info-box{
        ::-webkit-scrollbar{
            width: 0px;
        }
        .dialog-record{
            .el-form-item {
                margin-bottom: 0px;
            }
            min-height: 200px;
            max-height: 500px;
            overflow-y: scroll;
            padding-bottom: 80px;
            .audios{
                margin-bottom: 4px;
                .box-audio{
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 5px;
                }
                .box-audio:hover{
                    background-color: #f5f8fb;
                    cursor: pointer;
                }
                .box-audio:hover .date{
                    color: #009af3;
                }
                .audio-bar{
                    width: 300px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    background-color: #409EFF;
                    border-radius: 20px;
                    color: #fff;
                    font-size: 18px;
                    margin-left: 10px;
                }
                .audio-bar:hover{
                    background-color: #17a2b8;
                    cursor: pointer;
                }
                .boel{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    font-size: 12px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 2px solid #eee;
                }
            }

        }
    }

</style>
